<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>UR Search</title>
    <script src="js/jquery_min.js"></script>
    <link rel="stylesheet" href="css/list.css">
</head>

<body>
    <nav style="height: 70px; display: flex;">
        <img src="img/logo.png" style="width: 150px; height: 75px;  margin-top: 15px; margin-left: 30px;">
        <input id="str" placeholder="Searching for..."
            style="margin-top: 30px; width: 700px; height: 40px; border-radius: 20px; font-size: large; padding-left: 20px; margin-left: 0px;">
        <img src="img/R-C.jpg" style="width: 50px; height: 50px; margin-top: 29px;margin-bottom: -20px;cursor: pointer;"
            onclick="su()">
    </nav>
    <div id="num" style="margin-left: 190px; margin-top: 15px; color: gray; font-size: small;"></div>
    <div id="list" style="width: 1165.64px; height: 700px; padding-left: 200px; padding-top: 50px;">
        <!-- <div id="container">
            <a id="title" href="#">ArrayList</a>
            <div id="url">https://www.w3school.com.cn/tags/tag_a.asp</div>
            <div id="content">sout dgisa sgild aweq sout dgisa sgild aweq sout dgisa sgild aweq sout dgisa sgild aweq sout dgisa sgild aweq sout dgisa sgild aweq</div>
        </div> -->
    </div>
</body>
<script>
    function init() {
        let str = document.getElementById('str');
        let res = decodeURI(location.search.substring(5, location.search.length));
        str.setAttribute("value", res);
    }
    init();
    function search() {
        let str = document.getElementById('str');
        jQuery.ajax({
            type: 'get',
            url: '/search',
            data: {
                "str": str.value
            },
            success(result) {
                let list = document.getElementById('list');
                let resultNum=0;
                for (var re of result) {
                    resultNum+=1;
                    let container = document.createElement('div');
                    container.id = "container";
                    list.appendChild(container);
                    let title = document.createElement('a');
                    title.href = re.url;
                    title.id = "title";
                    title.innerHTML = re.title;
                    container.appendChild(title);
                    let url = document.createElement('div');
                    url.id = "url";
                    var urlHTML = re.url;
                    if (urlHTML.length > 70) {
                        urlHTML = urlHTML.substring(0, 70)+"...";
                    }
                    url.innerHTML = urlHTML;
                    container.appendChild(url);
                    let content = document.createElement('div');
                    content.id = "content";
                    content.innerHTML = re.desc;
                    container.appendChild(content);
                }
                let num=document.getElementById('num');
                num.innerHTML="当前找到"+resultNum+"个结果！";
            }
        });
    }
    search();
    function su() {
        let str = document.getElementById('str');
        if (str.value == "") {
            alert("请输入要搜索的内容！");
            return;
        }
        location.href = "list.html?str=" + str.value;
    }
</script>

</html>